<template>
  <PanelBlock>
    <!--    <div>我是一条动态</div>-->
    <span style="display: flex; align-items: center">
      <span style="display: flex; height: 100%">
        <img class="avatar" :src="data.image_key">
        <span class="infos">
          <div class="user-name">{{ data.user_name }}</div>
          <div class="time">{{ data.time }}</div>
        </span>
      </span>
      <div style="margin-left: 20px">{{ data.content }}</div>
    </span>
    <my-button type="primary">详情</my-button>
  </PanelBlock>
</template>

<script>
import PanelBlock from "@/components/PanelBlock.vue";
import MyButton from "@/components/common/myButton.vue";

export default {
  name: "PostEle",
  components: {MyButton, PanelBlock},
  props: {
    data: {
      type: Object,
      default: () => ({
        id: 4,
        user_id: 1,
        user_name: "58Q83",
        time: "2024-6-27 8:30:24",
        content: "神奇技术公司又出新成果",
        image_key: "https://p2.itc.cn/q_70/images03/20220826/4420c63c8fd849f1933cc21315a9b72b.jpeg",
        is_shared: false,
        share_id: -1,
        likes_count: 3,
        comments_count: 1,
        shares_count: 2,
      })
    }
  }
}
</script>

<style scoped>
.avatar {
  height: 80px;
  width: 80px;
  border-radius: 50%;
  margin-right: 10px;
}
.infos {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .user-name {
    font-size: var(--font-size-base);
    font-weight: 500;
  }
  .time {
    color: grey;
    font-size: var(--font-size-small);
  }
}
</style>